<template>
    <div class="graph-container">
        <div class="title">岗位-能力-课程图谱</div>
        <div ref="network" class="graph"></div>
    </div>
</template>
<script>
import { Network, DataSet } from 'vis'
import {jobNodes, abilityNodes, lessonNodes, jobToAbilityEdge, abilityLessonEdgeWithInheritance, lessonToLessonEdge, options} from '@/components/KnowledgeGraph/exampleDataV2.js'

export default {
    name:'KnowledgeGraph',
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            const nodes = new DataSet([...jobNodes, ...abilityNodes, ...lessonNodes]);  
  
            // 边数据  
            const edges = new DataSet([ ...jobToAbilityEdge, ...abilityLessonEdgeWithInheritance, ...lessonToLessonEdge ]);  

            const data = {  
                nodes: nodes,  
                edges: edges  
            }; 

            // 创建网络图实例  
            const container = this.$refs.network;  

            let network = new Network(container, data, options); 
            network.on('click', function (params) {  
                if (params.nodes.length > 0) {  
                    console.log('Node clicked!', params.nodes[0]);  
                }  
            });
        }
    }
}
</script>

<style scoped>
.graph-container {
    display:flex;
    height:calc(100vh - 90px);
    overflow: hidden;
}

.graph{
    flex:1;
}

.title{
    position:absolute;
    top:0px;
    left:0px;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    width:100%;
    height:32px;
    line-height:32px;
    text-align: center;
}
</style>
